import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

// 引入 i18n
import i18n from '@/lang'

import '@/icons' // icon
import '@/permission' // permission control 导航守卫

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// 引入mixin
import mixin from '@/mixin'
Vue.mixin(mixin)

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
Vue.use(ElementUI, {
  i18n: function(path, options) {
    // 调用 t 函数，t 的单词是 translate
    return i18n.t(path, options)
  }
})

import { imgerror } from '@/directives'
// 创建全局自定义指令
// Vue.directives(指令名， 指令的配置对象)
Vue.directive('imgerror', imgerror)

// 全局引入组件
// Vue.component('组件名', 组件对象)
// import PageTools from '@/components/PageTools'
// Vue.component('PageTools', PageTools)
// 如果有很多组件需要引入，我们可以封装到js文件中
// import '@/components/index.js'
// 以上这种办法并不规范，既不符合导入导出对象的习惯，也没有明确所操作的事情
// vue 提供了一个插件安装机制
// Vue.use(插件对象)

// 模拟伪代码
/* Vue.use = (obj)=>{
  // 每当 use 接收一个对象时
  // 自动执行对象里面的 install 方法
  // 同时将 vue 的构造器传入
  obj.install(Vue)
} */
import Component from '@/components/index'
Vue.use(Component)

// 过滤器
// 1. 自定义全局过滤器
/* Vue.filter('formatDate', (value) => {
  return value.split('T')[0]
}) */
// 2. 引入过滤器
// import { formatDate } from '@/filters/index'
// Vue.filter('formatDate', formatDate)

// 3. 引入全部过滤器，遍历把所有的过滤器引入到全局
// 将来自于一个文件的所有暴露属性一起引入放到一个对象中
import * as filters from '@/filters/index'
// 遍历 filters 里面的所有属性 以 key 为名称 以value 为函数
// for in 循环可以遍历对象
for (const key in filters) {
  // 对应的函数可以回到 filters 里面拿
  Vue.filter(key, filters[key])
}

Vue.config.productionTip = false

new Vue({
  el: '#app',
  // 挂载到Vue实例当中
  i18n,
  router,
  store,
  render: h => h(App)
})
